<!-- 养康陪护 -->
<template>
	<view class="container pb-30">
		<Navbar title="报告查询" bgColor="rgba(122, 131, 249)" :titleStyle="{color: '#fff'}" left-icon-color="#fff" />
		
		<view class="content">
			<view class="banner pl-70 mb-70">
				<view class="banner_msg d-flex mt-30">
					<text class="banner_msg_title pb-30">
						真诚关爱，充分信任
					</text>
					
					<text class="banner_msg_describe pt-30">
						数据精灵康养陪护风险报告 <br />
						让信任有据可依
					</text>
				</view>
			</view>
			
			<Report class="mb-30" />
			
			<RuleForm btnText="立即查询￥39.8" bgColor="rgba(255, 255, 255, 0.4980392156862745)" pageColor="#6642EA" />
		</view>
	</view>
</template>

<script setup>
	import {reactive} from 'vue'
	import Navbar from '@/components/Navbar/index.vue'
	import Report from '@/query/HealthCare/components/Report.vue'
	import RuleForm from '@/query/components/ruleForm.vue'
</script>

<style lang="scss" scoped>
@import '@/query/scss/index.scss';

.container {
	background: linear-gradient(to bottom, #7A83F9, #fff);
	
	.banner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		&_msg {
			flex-direction: column;
			&_title {
				border-bottom: 1px solid #fff;;
				line-height: 65rpx;
				color: #000;
				font: {
					weight: bold;
					style: oblique;
					size: 46rpx;
				}
			}
			&_describe {
				line-height: 40rpx;
				color: #000;
				font: {
					size: 26rpx;
				}
			}
		}
	}
	
	.card {
		background-color: rgba(255, 255, 255, 0.4980392156862745);
	}
}
</style>